<template>
  <div class="my">
    <van-nav-bar title="我的" left-text="返回" left-arrow @click-left="$goBack" />
    <div class="aa" >
      <div class="my-ico">
        <van-icon name="contact" color="#ffffff" size="90px" style="line-height: 120px;" />
      </div>
     <div class="my-username">
        <span style="line-height: 120px;">登录名：{{username}}</span>
     </div>
      
    </div>
    <van-cell title="我的订单" is-link to="/myorder" />
    <van-cell title="关于我们" is-link to="/about" />
    <van-tabbar v-model="active" placeholder="" route>
            <van-tabbar-item icon="home-o" to="/">首页</van-tabbar-item>
            <van-tabbar-item icon="apps-o" to="/sort">分类</van-tabbar-item>
            <van-tabbar-item :badge="shopCarData.length" to="/shopcar" icon="shopping-cart-o">购物车</van-tabbar-item>
            <van-tabbar-item icon="contact-o" to="/myui">我的</van-tabbar-item>
        </van-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 3,
      username:"张三",
      shopCarData: localStorage.getItem("shopCarData") ? JSON.parse(localStorage.getItem("shopCarData")) : [],
    };
  },
};
</script>

<style lang="less">
.aa {
  background-color: #4bc9b0;
  height: 120px;
  width: 96%;
  border-radius: 10px;
  margin: 20px auto;
}

.my-ico{
  float: left;
}
.my-username{
  float: left;
  color:#fff;
}

.shop-cart-tabbar {
  position: relative !important;
}
</style>